<template>
	<view :style="{background:(isshow==2?'#fff':'#fff')}">
		<view class="headers">
			<image src="../../static/zuo.png" mode="" style="width: 45upx;height: 45upx;" @click="back"></image>
			<text style="font-size: 40upx;margin-left: 35%;">话题</text>
		</view>
		<view class="header">
			<image :src="huatiInfo.img" mode="" style="width: 200upx;height: 200upx;border-radius: 10upx;">
			</image>
			<view style="display: flex;flex-direction: column;align-items: flex-start;">
				<text class="to">#{{huatiInfo.cate_name}}</text>
				<text style="padding-top: 20upx;padding-left: 30upx;color: #666666;">{{huatiInfo.num}}个视频</text>
			</view>
		</view>
		<view class="shai">
		<!-- 	<view @click="tocity" class="hehe">
				<text>{{city_id}}</text>
				<image src="../../static/to.png" mode="" style="width: 10upx;height: 10upx;padding-top: 10upx;"></image>
			</view>
			<view style="position: relative;" class="hehe">
				<text>{{zhiwei}}</text>
				<image src="../../static/to.png" mode="" style="width: 10upx;height: 10upx;padding-top: 10upx;"
					@click="shows"></image>
				<view class="onelist" v-show="isZhi">
					<h3 style="padding-top: 30upx;padding-left: 30upx;">职位名称</h3>
					<view class="twolist" v-for="item in zhilist">
						<text>{{item.name}}</text>
						<image src="../../static/tuo.png" mode=""
							style="width: 30upx;height: 30upx;padding-right: 40upx;" @click="show(item.id)"></image>
					</view>
				</view>
				<jobSelect ref="jobSelect" :listData="listData" @confirem="confiremJob"></jobSelect>
			</view>
			<view @click="more" class="hehe">
				<text>筛选更多</text>
				<image src="../../static/to.png" mode="" style="width: 10upx;height: 10upx;padding-top: 10upx;"></image>
			</view> -->
		</view>
		<view class="works" >
			<view style="display: flex;align-items: center;">
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text :class="isshow ==1?'ggw':'gg'" @click="isshow = 1">综合</text>
					<text class="heng" v-show="isshow ==1"></text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text :class="isshow ==2?'ggw':'gg'" style="margin-left: 50upx;" @click="isshow = 2">其它话题</text>
					<text class="heng" v-show="isshow ==2" style="margin-left: 50upx;"></text>
				</view>
			</view>
			<scroll-view scroll-y="" class="works_center" @scrolltolower='bottomScroll' v-if="isshow == 1">
				<view class="works_box" v-if="works.length>0">
					<view v-for="(item,index) in works" :index="index" style="margin-top: 30upx;">
						<view class='item' @click="navPlayer(item.uid,index)" style="margin-top: 10upx;">
							<image :src='item.cover_img'></image>
							<text class="title">{{item.title}}</text>
						</view>
					</view>
				</view>
				<view v-else style="width: 100%;display: flex;justify-content: center;">
					<image src="@/static/zanwu.png" mode="" style="width: 166px;height: 240upx;padding-top: 50upx;"></image>
				</view>
			</scroll-view>
			<scroll-view scroll-y="" class="works_center" @scrolltolower='bottomScroll' v-else>
				<view v-for="item in htlist">
					<view style="display: flex;margin-top: 40upx;" @click="tohuati(item.id)">
						<image :src="item.img" mode="" style="width: 100upx;height: 100upx;border-radius: 10upx;">
						</image>
						<view style="display: flex;flex-direction: column;align-items: flex-start;padding-left: 30upx;">
							<text class="to" style="font-weight: 600;font-size: 30upx;">#{{item.cate_name}}</text>
							<text style="padding-top: 20upx;color: #999999;font-size: 24upx;">{{item.num}}个视频</text>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
		
		<view class="mask" v-show="isZhi" @click="isZhi=false"></view>	
		<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="全部筛选" height="1104rpx"
			@finsh="subFinsh"></filter-popup>
	</view>
</template>

<script>
	import FilterPopup from "@/components/filter-popup/filter-popup";
	import jobSelect from '@/components/yunmiao-jobSelect/yunmiao-jobSelect.vue'
	export default {
		data() {
			return {
				splist: [],
				isZhi: false,
				huatiInfo:{},
				cate_id:'',
				isshow:1,
				city_ids:'',
				page:1,
				city_id:'',
				arr_ids:[],
				topic_id:'',
				listData: [],
				zhilist: [],
				zhiwei: '期望职位·不限',
				city_id: '期望城市·不限',
				popup: {
					filter: false,
				},
				"data": [{
					"id": 385,
					"cate_name": "\u6027\u522b\u8981\u6c42",
					"cate_id": 371,
					"children": false,
					"title": "\u6027\u522b\u8981\u6c42",
					"key": "intention_type",
					"keyValue": "value",
					"isRadio": "true",
					"data": [{
						"id": 386,
						"title": "\u4e0d\u9650",
						"cate_id": 371
					}, {
						"id": 387,
						"title": "\u7537",
						"cate_id": 371
					}, {
						"id": 388,
						"title": "\u5973",
						"cate_id": 371
					}]
				}, {
					"id": 389,
					"cate_name": "\u5b66\u5386\u8981\u6c42",
					"cate_id": 371,
					"children": false,
					"title": "\u5b66\u5386\u8981\u6c42",
					"key": "intention_type",
					"keyValue": "value",
					"isRadio": "true",
					"data": [{
						"id": 390,
						"title": "\u4e0d\u9650",
						"cate_id": 371
					}, {
						"id": 392,
						"title": "\u521d\u4e2d\u53ca\u4ee5\u4e0b",
						"cate_id": 371
					}, {
						"id": 393,
						"title": "\u9ad8\u4e2d\/\u4e2d\u4e13",
						"cate_id": 371
					}, {
						"id": 394,
						"title": "\u5927\u4e13",
						"cate_id": 371
					}, {
						"id": 395,
						"title": "\u672c\u79d1",
						"cate_id": 371
					}, {
						"id": 396,
						"title": "\u7814\u7a76\u751f",
						"cate_id": 371
					}, {
						"id": 398,
						"title": "\u7855\u58eb",
						"cate_id": 371
					}]
				}, {
					"id": 399,
					"cate_name": "\u7ecf\u9a8c\u8981\u6c42",
					"cate_id": 371,
					"children": false,
					"title": "\u7ecf\u9a8c\u8981\u6c42",
					"key": "intention_type",
					"keyValue": "value",
					"isRadio": "true",
					"data": [{
						"id": 400,
						"title": "\u4e0d\u9650",
						"cate_id": 371
					}, {
						"id": 401,
						"title": "1-2\u5e74",
						"cate_id": 371
					}, {
						"id": 402,
						"title": "2-4\u5e74",
						"cate_id": 371
					}]
				}],
				//筛选表单数据
				filterData: [{
						children: false, //是否有子项
				 	title: "意向度",
						key: "intention_type", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
				  isRadio: true, //是否单选 否则多选
						data: [{
							"id": 386,
							"title": "这啥",
							"cate_id": 371,
							"value": 0
						}, {
							"id": 387,
							"title": "我很烦",
							"cate_id": 371,
							"value": 1
						}, {
							"id": 388,
							"title": "第三个",
							"cate_id": 371,
							"value": 2
						}],
					},
					{
						children: false, //是否有子项
						title: "手机号码",
						key: "is_bind_phone", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "未绑定",
								value: 0,
							},
							{
								title: "已绑定",
								value: 1,
							},
						],
					},
					{
						children: false, //是否有子项
						title: "企微好友",
						key: "is_work_customer", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "未添加",
								value: 0,
							},
							{
								title: "已添加",
								value: 1,
							},
						],
					},
					{
						children: true, //是否有子项
						isRadio: false, //是否单选
						title: "标签内容",
						key: "label", //键名 接收对象名字
						keyValue: "id", //获取的值是哪个
						data: [{
								title: "客户重要程度",
								id: 22,
								children: [{
										title: "一般意向2",
										id: 32,
										value: 1,
									},
									{
										title: "一般意向3",
				 					id: 12,
										value: 1,
									},
				  		],
							},
							{
								title: "客户重要程度2",
								id: 122,
								children: [{
										title: "一般意向2",
										id: 43,
										value: 1,
				 				},
									{
										title: "一般意向3",
										id: 23,
										value: 1,
									},
								],
							},
						],
					},
				], //筛选数据
				filterForm: {}, //选中的表单
				works:[],
				htlist:[],
				userInfos:{}
			}
		},
		components: {
			jobSelect,
		},
		onLoad(option) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.userInfos = JSON.parse(value)
					console.log(this.userInfos,"sadasda")
					
				}
			} catch (e) {
				// error
			}
			this.topic_id = option.id
			uni.request({
				url: 'https://dsx.cdzer.com/api/Topic/gettopic', //仅为示例，并非真实接口地址。
				data: {
					cate_id: this.topic_id,
					
				},
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res, "话题列表")
					this.htlist = res.data.data
				}
			});

			uni.request({
				url: 'https://dsx.cdzer.com/api/Topic/gettopic_details_new', //仅为示例，并非真实接口地址。
				method: 'POST',
				data:{
					page:this.page,
					topic_id:this.topic_id,
					uid:this.userInfos.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res, "话题视频")
					this.works = res.data.data.videolist
					this.huatiInfo = res.data.data.catedata
				}
			});

		},
		methods: {
			htspp(id){
				this.isshow=1
				uni.request({
					url: 'https://dsx.cdzer.com/api/Topic/gettopic_details_new', //仅为示例，并非真实接口地址。
					method: 'POST',
					data:{
						page:this.page,
						topic_id:id,

					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "话题视频")
						this.works = res.data.data.videolist
						this.huatiInfo = res.data.data.catedata
					}
				});
			},
			tohuati(id){
				this.htspp(id)
			},
			more(){
				//话题筛选
				uni.request({
					url: 'https://dsx.cdzer.com/api/Topic/getconditions', //仅为示例，并非真实接口地址。
					data: {
						cate_id: this.topic_id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "话题筛选列表")
						this.filterData = res.data.data
				
					}
				});
				this.popup.filter = true
				
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			navPlayer(id, index) {
				var shipin = JSON.stringify(this.works)
				uni.navigateTo({
					url: './htShipin?shpo_id=' + id + '&index=' + index + '&page=' + this
						.page + '&shipin=' + shipin+ '&useid=' + this.userInfos.id
				})
			},
			confiremJob(e) {
				console.log(e)
				this.zhiwei = e.name
				this.isZhi = false
				this.position_id = e.id

			},
			shows() {
				this.isZhi = true

			},
			huatisp(){
				uni.request({
					url: 'https://dsx.cdzer.com/api/Topic/gettopic_details', //仅为示例，并非真实接口地址。
					method: 'POST',
					data:{
						cate_id:this.topic_id,
						page:this.page,
						city_id:this.city_ids,
						arr_ids:this.arr_ids,
						topic_id:this.huatiInfo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "话题视频")
						if(res.data.status==400){
							alert(111)
							this.works = res.data.data
							this.splist =res.data.data
						}else{
							this.splist = res.data.data.videolist
							this.works  = res.data.data.videolist
							this.huatiInfo = res.data.data.catedata
						}
					}
				});
			},
			subFinsh(e) {
				console.log("this.filterForm :>> ", this.filterForm);
				console.log("返回参数数组 和 this.filterForm 相等 :>> ", e.intention_type0);
				if(e.intention_type0.length==0){
					this.arr_ids = []
					uni.request({
						url: 'https://dsx.cdzer.com/api/Topic/gettopic_details', //仅为示例，并非真实接口地址。
						method: 'POST',
						data:{
							cate_id:this.cate_id,
							page:this.page,
							city_id:this.city_ids,
							arr_ids:this.arr_ids,
							topic_id:this.topic_id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res, "话题视频")
							this.splist = res.data.data.videolist
							this.huatiInfo = res.data.data.catedata
						}
					});
				}else{
					var a = []
					a.push(this.filterData[0].data[this.filterForm.intention_type0[0]].id)
					var b = []
					b.push(this.filterData[1].data[this.filterForm.intention_type1[0]].id)
					var c = []
					c.push(this.filterData[2].data[this.filterForm.intention_type2[0]].id)
					var d = a.concat(b)
					this.arr_ids = d.concat(c)
					this.huatisp()
				}
			},
			tocity() {
				var huati = "2"
				uni.navigateTo({
					url: `../tabBar/bianji/city?type=${huati}&useId=${this.topic_id}`
				})
			},
			show(id) {
				this.zhiweiId = id
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/getpositionlist', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						cate_id: id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "岗位列表")
						if (res.data.status == 200) {
							this.listData = res.data.data
							this.$refs.jobSelect.show()
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body{
		background-color: #fff;
	}
	.heng{
		width: 50upx;
		height: 6upx;
		background: #333333;
		border-radius: 3upx;
		display: inline-block;
	}
	.gg {
		font-size: 32upx;
		color: #999999;
	}
	
	.ggw {
		font-size: 32upx;
		color: #333333;
		// font-weight: bold;
		// border-bottom: 4upx solid #FF3D3D;
		display: flex;
		flex-direction: column;
	}
	.headers{
		position: fixed;
		background-color: #fff;
		height: 110upx;
		width: 100%;
		top: 0upx;
		left: 0;
		display: flex;
		z-index: 100;
		align-items: center;
		padding-left: 30upx;
	}
	.onelist {
		width: 100%;
		// height: 500upx;
		z-index: 102;
		background-color: #FFFFFF;
		position: fixed;
		// z-index: 66;
		top: 0upx;
		display: flex;
		left: 0;
		padding-bottom: 40upx;
		flex-direction: column;

		.twolist {
			display: flex;
			padding: 30upx;
			justify-content: space-between;
			border-bottom: 2upx solid #EEEEEE;
			width: 100%;
		}
	}
	.mask{
		 width: 100%;
		  height: 100%;
		  position: absolute;
		  background: rgba(0, 0, 0, 0.2);
		  top: 0;
		  left: 0;
		  z-index: 100;
		  cursor: pointer;
		  transition: all 0.15s;
	}
.shipin{
	display: flex;
}
	.works_box {
		display: flex;
		flex-wrap: wrap;
		height: auto;
		overflow: hidden;
		// justify-content: space-between;

		.mo {
			flex-direction: column;
			margin-top: 20upx;
			margin-left: 10upx;
			align-items: center;
			justify-content: center;
		}

		.item {
			display: flex;
			flex-direction: column;
		}
	}

	.title {
		font-size: 30upx;
		width: 329upx;
		background-color: #EEEEEE;
		padding: 6upx;
		color: #666666;
		white-space: nowrap; //规定段落中的文本不进行换行
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.header {
		padding: 30upx;
		display: flex;
		align-items: flex-start;
		margin-top: 118upx;
	.to {
			color: #000;
			font-size: 36upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			padding-left: 30upx;
		}
	}

	.shai {
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
		margin-top: 30upx;

		.hehe {
			width: 220upx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60upx;
			background: #EEEEEE;
			border-radius: 10upx;
		}
	}

			.works {
				margin: 20rpx 3vw;
				width: 94vw;
			
				.hint {
					font-size: 30rpx;
					color: #fffefe;
				}
			
				.works_center {
					height: calc(100vh - 400rpx);
			
					.works_box {
						display: flex;
						flex-wrap: wrap;
			
						.item {
							margin-right: 1.3vw;
							position: relative;
							display: flex;
							flex-direction: column;
			
							.title {
								font-size: 30upx;
								width: 215upx;
								text-align: center;
								border-radius: 0px 0px 10upx 10upx;
								background-color: #EEEEEE;
								padding: 6upx;
								color: #666666;
								white-space: nowrap; //规定段落中的文本不进行换行
								text-overflow: ellipsis;
								overflow: hidden;
							}
			
							image {
								width: 30vw;
								height: 40vw;
							}
			
							view {
								position: relative;
			
							}
			
							.like_box {
								position: absolute;
								left: 15rpx;
								bottom: 60rpx;
								color: #fff;
								font-size: 24rpx;
								display: flex;
								align-items: center;
			
								image {
									width: 21rpx;
									height: 18rpx;
									z-index: 2;
									margin-right: 5rpx;
								}
							}
						}
					}
			
			
				}
			
			}
</style>
